<template>
  <div class="UploadLoad justifyAlignB">
    <el-dialog  v-dialogDrag   title="十三月年结正在进行中请稍后…" :visible.sync="dialogVisible" text-align:center width="50%" :before-close="handleClose">
      <el-progress v-if="!loading" :percentage="num" />
    </el-dialog>
  </div>
</template>

<script>
import {
  saveMonthEnd,getPaymentPercent
} from '@/api/thirteen/salaryMonthEnd' 
export default {
  name: 'uploadLoadSalaryMonthEnd',
  components: {},
  filters: {
    getbankFilter(value, that) {
      for (const key in that.agencyBankLists) {
        if (that.agencyBankLists[key].code == value) {
          return that.agencyBankLists[key].name
        }
      }
    }
  },
  props: {
    // api: {
    //   type: String,
    //   default: function() {
    //     return ''
    //   }
    // },
    agencyVerList: {
      type: Array,
      default: () => []
    },
    //  object: {
    //   type: Object,
    //   default: function() {
    //     return {}
    //   }
    // },
    // agencyVerList: {
    //   type: Object,
    //   default: function() {
    //     return {}
    //   }
    // }
  },
  data() {
    return {
      that: this,
      dialogVisible: true,
      num: 0,
      timer: null,
      // object: {},
      Message: '',
      loading: true,
      guid: '',
      params:this.agencyVerList.bizKey,
    }
  },
  mounted() {
      this.getMessage()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getMessage() {
       const postIds = []
      this.agencyVerList.forEach(item => {
        const current = {}
        current['agencyId'] = item.agencyId
        current['bizKey'] = item.bizKey
       postIds.push(current)
      })
      saveMonthEnd(postIds).then(res => {
          if (res.data && res.data.guid) {
            // this.Message = res.data.message
            this.guid = res.data.guid
            this.loading = false
            this.timer = setInterval(this.getProgresss, 1000)
          }
          if(res.data=='Executing'){
          this.guid = res.data.guid
          this.timer = setInterval(this.getProgresss, 1000)
          }
      })
    },
    getProgresss() {
      let tmp = {
        "uuid": this.guid
      }
      getPaymentPercent(tmp).then(res => {
         if (res.data || res.data === 0) { 
           if(res.data=='S' || res.data=='F' || res.data.indexOf('F') !== -1){
             this.num = parseInt(Number(100))
           }else{
             this.num = parseInt(Number(res.data * 100).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")) 
           }  
           // 成功res.data.indexOf('S') !== -1
           if (res.data=='S') {
             clearInterval(this.timer)
             setTimeout(() =>{
              this.$message({
              showClose: true,
              message: '年结成功',
              type: 'success',
              duration: 4000
              })
              this.$emit('close', 1)
             },1000)
           }
           // 失败res.data.indexOf('F') !== -1
           if (res.data=='F' || res.data.indexOf('F') !== -1) {
             clearInterval(this.timer)
             setTimeout(() =>{
              this.$message({
              showClose: true,
              message: res.data.substring(2)+'年结失败',
              type: 'error',
              duration: 0
              })
              this.$emit('close', 1)
             },1000)
           }
          this.$emit('monthEndCallback')
         } else{
            // this.$message({
            //   showClose: true,
            //   message: '无月结的单位！',
            //   type: 'error',
            //   duration: 0
            //   })
            // clearInterval(this.timer)
            this.$emit('monthEndCallback')
         }
      })
    },
    handleClose() {
      this.$emit('close', 1)
    }
  }
}
</script>
<style lang="scss">
    .justifyAlign{
        text-align-last:justify;

        text-align:justify;

        text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器

        width: 100px;
    }
    .justifyAlignB b{
      width:30px;
      text-align:center;
    }
    .el-dialog__header {
    padding: 20px;
    padding-bottom: 10px;
    text-align: center;
}
</style>
